<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue动画</title>
  <style>
   #div1{
     width: 100px;
     height: 100px;
     background-color: red;
  }
  #div2{ width: 100px; height: 100px; background-color: red; } .fade1-transition{ transition: 1s all ease; } .fade1-enter{ opacity: 0; } .fade1-leave{ opacity: 0; transform: translateX(200px);
  }
  </style>
  <script src="bower_components/vue/dist/vue.js" charset="utf-8"></script>
  <link rel="stylesheet" href="bower_components/animate.css/animate.css" type="text/css">
</head>
<body>
  <div id="box">
    <input type="button" name="" value="按钮" @click="toggle()">
    <div id="div1" v-show="bSign" transition="fade1"></div>
  </div>
  <div id="box2">
    <input type="button" name="" value="按钮2" @click="toggle2()">
    <div id="div2" v-show="bSign2" transition="bounce" class="animated"></div>
  </div>
  <script>
    new Vue({
      el: "#box2",
      data: {
        bSign: true,
        bSign2: true
      },
      methods: {
        toggle: function(){
          // alert(1)
          this.bSign = !this.bSign
        },
        toggle2: function(){
            // alert(1)
            this.bSign2 = !this.bSign2
          }
      },
      // transitions: { //定义所有动画名称
      //   bounce: {
      //     enterClass: "zoomInLeft",
      //     leaveClass: 'zoomOutRight'
      //   }
      // }
      transitions:{ //定义所有动画名称
				bounce:{
					enterClass:'zoomInLeft',
					leaveClass:'zoomOutRight'
				}
			}
    })
  </script>
</body>
</html>
